<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: grey;
            margin: 50px;

        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>
<script>
    // 事件对象 => 事件触发时的相关信息 (什么时间 发生了什么类型的事件 发生在谁身上  鼠标 => 按键,鼠标的位置  键盘 => 字符,键盘符 中文)

    // 如何获取事件对象 ? 
    // (1) 常规浏览器  => 在绑定的事件函数中 添加形参(e evt event)
    // (2) 低版本IE   => window.event

    // 兼容 
    // var e = e || window.event;



    var box = document.querySelector(".box");

    box.onclick = function (e) {
        // console.log(e);

        // 前面有值就取前面的 没有值就取后面 (将前面的值作为表达式 true=>前面 false=>后面的)
        // var e = e ? e : window.event;
        var e = e || window.event;

        console.log(e);




    }

    // 拓展
    // ||  同假为假 遇真为真  =>  短路运算(只要有一个表达式为真 后面就没有必要看了,就停在该位置)
    // 总结: 前面有值就取前面,没有值就取后面
    // console.log(1 || 2);
    // console.log(0 || 2);
    // console.log(0 || null);
    // console.log(0 || null || 2);
    // console.log(0 || 3 || null);


    // &&  同真为真 遇假为假  =>  短路运算(只要有一个表达式为假 后面就没有必要看了,就停在该位置)
    // 全都有值才可以,有一个没有值 => 就停留在当前位置
    // console.log(1 && 2);
    // console.log(0 && 2);
    // console.log(0 && null);
    // console.log(1 && 0 && 2); 

    var a = 1 || 2; // 1
    var b = 1 && 2; // 2
    var c = a * 3 + b;
    console.log(c); // 




</script>

</html>